<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改信息</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!--    引入首页样式-->
    <link href="../admin/indexCss.css" rel="stylesheet" type="text/css">
    <style>
        section{
            padding: 100px;
        }

    </style>
</head>
<body>

<header class=" navbar-fixed-top " id="h-new">
    <header-new v-bind:u="u"></header-new>
</header>



<!--正文在这里继续-->
<!--管理员登录-->
<section class="container">
    <div  class="alert alert-danger"
          v-show="hasError">
        <i class="fa fa-exclamation-triangle"></i>
        <span v-text="message">格式错误！</span>
    </div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-6 col-md-offset-2">
            <div class="panel panel-success">
                <div class="panel-heading">个人信息完善
                    <a class="panel-title" href="geren.html" style="float: right;cursor: pointer;text-decoration:none">
                        <i aria-hidden="true" class="fa fa-arrow-left fa-lg"></i>返回</a>
                </div>
                <div class="panel-body" style="color:#000;">

                    <form @submit.prevent="update" class="form-horizontal" enctype="multipart/form-data" id="fform">
                        <div class="form-group">
                            <label class="col-sm-2 control-label" >您的名字</label>
                            <div class="col-sm-10">
                                <input  class="form-control" name="username" pattern="^.{2,20}$" placeholder="2~20个字符(字母、数字、_ 、$)" type="text"
                                       v-model="username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">靓仔头像</label>
                            <div class="col-sm-10">
                                <input  name="picFile" placeholder="请选择头像图片" type="file">
                                </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">个性昵称</label>
                            <div class="col-sm-10">
                                <input  class="form-control" name="nick" pattern="^.{2,20}$" placeholder="以便后续展示 2~20个字符(字母、数字、_ 、$)"
                                        type="text" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">自我介绍</label>
                            <div class="col-sm-10">
                                <input  class="form-control" name="intro" placeholder="介绍自己一下吧"
                                        type="text" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">怎么称呼</label>
                            <div class="col-sm-5">
                                <input name="gender" placeholder="跟随自己的心" type="radio" value="先生">先生
                                &nbsp;&nbsp;&nbsp;
                                <input name="gender" placeholder="跟随自己的心" type="radio" value="女士">女士
                                &nbsp;&nbsp;&nbsp;
                                <input name="gender" placeholder="跟随自己的心" type="radio" value="保密">保密
                            </div>
                            <div class="col-sm-2">
                                <label class="control-label" style="float:right;margin-right: 0;padding-right-left: 0">您贵庚</label>
                            </div>
                            <div class="col-sm-3">
                                <input  class="form-control" name="age"placeholder="贵庚" style="float:left;margin-left: 0" type="text" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">收货地址</label>
                            <div class="col-sm-10">
                                <input  class="form-control" name="address" placeholder="以后收货用哦~"
                                        type="text" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">地址简介</label>
                            <div class="col-sm-10">
                                <input  class="form-control" name="remark" placeholder="收货说明 or 详情"
                                        type="text" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">您的手机</label>
                            <div class="col-sm-10">
                                <input class="form-control" name="phone" pattern="^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$"
                                       placeholder="请输入手机号" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-4">
                                <button class="btn btn-default" type="submit">确认修改</button>
                            </div>
                        </div>
                        <div class="form-group">

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--导入弹窗组件-->
<script src=" https://unpkg.com/sweetalert/dist/sweetalert.min.js "></script>
<!--引入vue和axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v = new Vue({
        el:"section"
        ,data:{
            hasError:false,
            message:"",
            username:''

        },
        created:function (){

        }
        ,methods: {
            update: function () {
                if (v.username!='') {
                        swal("您确定要修改用户名吗?", "修改之后要重新登录", "warning", {
                            button: "我就改",
                        }).then((value) => {
                            if (value == true) {
                                let id = location.search.split("=")[1]
                                let form = new FormData(document.getElementById("fform"));
                                form.append("userid",id)
                                axios({
                                    method: 'post',
                                    url: '/mall/updateUserDetail',
                                    data: form
                                })
                                    .then(function (r) {
                                        if (r.data == "ok") {
                                            v.hasError = false;
                                            location.href = '/logOut';
                                        } else {
                                            console.log(r.data);
                                            v.hasError = true;
                                            v.message = r.data;
                                        }
                                    });
                            }
                        })
                    }else {
                    swal("", "您确定要修改吗", "info", {
                        button: "想好了",
                    }).then((value) => {
                        if (value == true) {
                            let id = location.search.split("=")[1]
                            let form = new FormData(document.getElementById("fform"));
                            form.append("userid", id)
                            axios({
                                method: 'post',
                                url: '/mall/updateUserDetail',
                                data: form
                            })
                                .then(function (r) {
                                    if (r.data == "ok") {
                                        location.href="geren.html"
                                    } else {
                                        console.log(r.data);
                                        v.hasError = true;
                                        v.message = r.data;
                                    }
                                });
                        }
                    })

                }
                }


        }
    })
</script>
<script src="js/header-new.js"></script>
<script>
    let vn = new Vue({
        el:"#h-new"
        ,data:{
            u:[]
        },
        created:function (){
            axios.get("/mall/getUser").then(function (response) {
                vn.u = response.data;
            })
        }
    })
</script>


<!--swal("", "修改之后要重新登录", "warning", {-->
<!--button: "我就改",-->
<!--}).then((value) => { });-->


</body>
</html>